<template>
  <div class="already-vote">
    <head-top head-title="投票统计" goBack="true"></head-top>
    <div class="areas-name border-bottom">
      <div class="name">
        <span>小区名称：{{$route.params.name}}</span>
      </div>
      <div class="count">
        <span>已投票总数(<span style="color: #0078de; font-size: 14px">{{intelList.length + otherList.length + recycleList.length}}票</span>)</span>
      </div>
    </div>
    <ul class="navbar">
      <li class="nav-item" v-for="(item, index) in dataList" :key="index" @click="showContainer(index)"><span :class="{'item': i===index}">{{item.name}}({{item.count || 0}})</span></li>
    </ul>
    <div class="already">
      <div class="vote-wrapper" v-show="i === 0">
        <!-- <div class="text border-bottom" @click="intelItem">
          <span>网络投票</span>
          <span class="arrow">{{intelList.length}}票&nbsp;＞</span>
        </div> -->
        <transition name="item"> 
          <ul class="toupiao-wrapper">
            <li class="tou-wrapper border-bottom-last" v-for="(item,key) in intelList" :key="key">
              <div class="left">{{item.areasName}}</div>
              <div class="right">
                <div class="yi-color">已投</div>
                <input class="yi-input"  type="checkbox" checked disabled name="id" :value="item.id" :id="item.id">
                <label :for="item.id"></label>
              </div>
            </li>
          </ul>
        </transition>
      </div>
      <div class="vote-wrapper" v-show="i === 1">
        <!-- <div class="text border-bottom" @click="recycleItem">
          <span>现场回收</span>
          <span class="arrow">{{recycleList.length}}票&nbsp;＞</span>
        </div> -->
        <transition name="item"> 
          <ul class="toupiao-wrapper">
            <li class="tou-wrapper border-bottom-last" v-for="(item,key) in recycleList" :key="key">
              <div class="left">{{item.areasName}}</div>
              <div class="right">
                <div class="yi-color">已投</div>
                <input class="yi-input"  type="checkbox" checked disabled name="id" :value="item.id" :id="item.id">
                <label :for="item.id"></label>
              </div>
            </li>
          </ul>
        </transition>
      </div>
      <div class="vote-wrapper" v-show="i === 2">
        <!-- <div class="text border-bottom" @click="otherItem">
          <span>其他投票</span>
          <span class="arrow">{{otherList.length}}票&nbsp;＞</span>
        </div> -->
        <transition name="item"> 
          <ul class="toupiao-wrapper">
            <li class="tou-wrapper border-bottom-last" v-for="(item,key) in otherList" :key="key">
              <div class="left">{{item.areasName}}</div>
              <div class="right">
                <div class="yi-color">已投</div>
                <input class="yi-input"  type="checkbox" checked disabled name="id" :value="item.id" :id="item.id">
                <label :for="item.id"></label>
              </div>
            </li>
          </ul>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import headTop from '../header/Header.vue'
import {lookAlreadyVote} from '../../api/toupiaotongji.js'
export default {
  name: 'AlreadyVote',
  data () {
    return {
      i: 0,
      intelList: [],
      recycleList: [],
      otherList: [],
      dataList: [{name: '网络投票'}, {name: '现场回收'}, {name: '其他投票'}]
    }
  },
  components: {
    headTop
  },
  created() {
    this._lookAlreadyVote()
  },
  methods: {
    _lookAlreadyVote() {
      lookAlreadyVote(this.$route.params.vid).then(res => {
        if (res.code === 200) {
          this.intelList = res.data.intelVote
          this.recycleList = res.data.recoveryVote
          this.otherList = res.data.otherVote
          var currentLength = [this.intelList.length, this.recycleList.length, this.otherList.length]
          this.dataList.forEach((item, index) => {
            this.$set(item, 'count', currentLength[index])
          })
          this.intelList.forEach(item => {
            this.$set(item, 'areasName', `${item.yuan}${item.zhuang}幢${item.util}单元${item.fanghao}室`)
          })
          this.recycleList.forEach(item => {
            this.$set(item, 'areasName', `${item.yuan}${item.zhuang}幢${item.util}单元${item.fanghao}室`)
          })
          this.otherList.forEach(item => {
            this.$set(item, 'areasName', `${item.yuan}${item.zhuang}幢${item.util}单元${item.fanghao}室`)
          })
        }
      })
    },
    showContainer(index) {
      this.i = index
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0
      window.pageYOffset = 0
    }
  }
}
</script>

<style lang="scss">
  .already-vote {
    padding-top: 40px;
    .navbar {
      position: fixed;
      top: 75px;
      left: 0;
      z-index: 2;
      width: 100%;
      display: flex;
      height: 40px;
      line-height: 40px;
      background-color: #fff;
      .nav-item{
        flex: 1;
        height: 100%;
        text-align: center;
        border-bottom: 2px solid #f2f2f2;
        font-size: 13px;
        .item{
          display: inline-block;
          height: 100%;
          padding:0 10px;
          border-bottom: 2px solid #0078de;
          color: #0078de;
        }
      }
    }
    .areas-name {
      width: 100%;
      position: fixed;
      top: 40px;
      left: 0;
      display: flex;
      padding: 0px 10px;
      box-sizing: border-box;
      height: 35px;
      line-height: 35px;
      color: #666;
      z-index: 2;
      background-color: #fff;
      .name {
        flex: 1;
        font-size: 13px;
      }
      .count {
        flex: 1;
        text-align: right;      
      }
    }
    .already{
      margin-top: 75px;
      .vote-wrapper {
        .toupiao-wrapper{
          -webkit-overflow-scrolling: touch;
          .tou-wrapper{
            margin:0 10px;
            height: 44px;
            line-height: 44px;
            font-size: 14px;
            .left{
              display: inline;
              text-align: left;
            }
            .right{
              text-align: right;
              position: relative;
              top: -42px;
              height: 44px; 
              input[type='checkbox'] {display: none}
              label { position: absolute; right: -8px; top: 12px;}
              label:before { content: ''; position: absolute; left: -30px; top: 0; width: 16px; height: 16px; border: 1px solid #ddd; border-radius: 50%; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; }
              label:after { content: ''; position: absolute; left: -23px; top: 3px; width: 4px; height: 10px; border: 0; border-right: 1px solid #fff; border-bottom: 1px solid #fff; background: #fff; transform: rotate(45deg); transition: all 0.3s ease;}
              input[type='checkbox']:checked + label:before { background: #0087de; border-color: #0087de; }
              input[type='checkbox']:checked + label:after { background: #0087de; }
              .yi-color{
                margin-right: 25px;      
              }
            }
          }
        }
      }
    }
  }
</style>

